<template>
    <div id="nav">
        <router-link to="/me" :class="$route.path === '/me' ? 'active' : ''">个人资料</router-link>
        <router-link to="/Addrelease" :class="$route.path === '/Addrelease' ? 'active' : ''">发布帖子</router-link>
        <router-link to="/myGiveup" :class="$route.path === '/myGiveup' ? 'active' : ''">我的点赞</router-link>
        <router-link to="/myCollent" :class="$route.path === '/myCollent' ? 'active' : ''">我的收藏</router-link>
        <router-link to="/mySend" :class="$route.path === '/mySend' ? 'active' : ''">我的发布</router-link>
    </div>
</template>

<script>
export default {
    name:"Me-Nav",
}
</script>

<style scoped lang="less">
    #nav{
        width: 200px;
        background: #fff;
        height: 100%;
        flex-shrink: 0;

        a{
            display: block;
            height: 60px;
            text-align: center;
            line-height: 60px;

            &:hover{
                background: rgb(0, 0, 0);
                color: #fff;
            }
        }

        .active{
            background: #ccc;
        }
    }
</style>